import React from 'react'
import { Layout, Menu, theme } from 'antd'
import Show from "../components/Carousel1"
import '../Assets/home.css'
import phone from "../utils/product.json"
import computer from "../utils/computer.json"
import tablet from "../utils/tablet.json"
import { Link } from 'react-router-dom'
import SearchInput from "../components/SearchInput"
const { Header, Content, Footer } = Layout
const App = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken()
    let layout = <><Layout className="layout">
        <Header
            style={{
                display: 'flex',
                alignItems: 'center',
                margin: 0,
                padding: 0
            }}
        >
            <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={['1']}
                items={[
                    { key: '1', label: '华为官网' },
                    { key: '2', label: '关于我们' },
                    { key: '3', label: '服务大厅' },
                    { key: '4', label: '联系我们' },
                ]}
            />
        </Header>
        <Content>
            <div
                className="site-layout-content"
                style={{
                    background: colorBgContainer,
                }}
            >
                <img src="/file/huaweilogo.jpg" alt="华为图标" id="logo" />
                <a href="http://localhost:3000/home" id="title1">华为</a>
                <a href="https://www.vmall.com/portal/activity/index.html?pageId=401109410" id="title2">鸿蒙智行</a>
                <a href="https://www.vmall.com/portal/activity/index.html?pn=zhixuanpc" id="title3">华为智选</a>
                <a href="https://www.vmall.com/portal/activity/index.html?pn=harmonyosconnectpc"
                    id="title4">生态周边</a>
                <SearchInput/>
                {/* <form id="searchForm">
                    <input type="text" placeholder="请输入搜索内容" id="search"/>
                    <input type="submit" value="提交" id="submit"/>
                </form> */}
                <Show />
                <div>
                    <ul id="list">
                        <li>< a href="https://example.com">手机</a></li>
                        <li>< a href="https://example.com">平板</a></li>
                        <li>< a href="https://example.com">电脑</a></li>
                        <li>< a href="https://example.com">耳机音箱</a></li>
                        <li>< a href="https://example.com">智慧屏</a></li>
                        <li>< a href="https://example.com">智能家居</a></li>
                        <li>< a href="https://example.com">出行车品</a></li>
                        <li>< a href="https://example.com">数码配件</a></li>
                        <li>< a href="https://example.com">增值服务</a></li>
                        <li>< a href="https://example.com">商用终端</a></li>
                        <li>< a href="https://example.com">生态周边</a></li>
                    </ul>
                </div>
                <div className="service-item">
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=zhbgpc">
                        <img src="/file/智慧办公.webp" alt="智慧办公" />
                        <p>智慧办公</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=zhinengjiajupc">
                        <img src="/file/智能家居.webp" alt="智能家居" />
                        <p>智能家居</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pageId=401109410">
                        <img src="/file/鸿蒙智行.webp" alt="鸿蒙智行" />
                        <p>鸿蒙智行</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=phonespc">
                        <img src="/file/华为手机.webp" alt="华为手机" />
                        <p>华为手机</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pageId=401019546">
                        <img src="/file/影音娱乐.webp" alt="影音娱乐" />
                        <p>影音娱乐</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=yundongjkpc">
                        <img src="/file/运动健康.webp" alt="运动健康" />
                        <p>运动健康</p>
                    </a>
                </div>
                <div className="service-item">
                    <a href="https://company.vmall.com/#/">
                        <img src="/file/企业商用.webp" alt="企业商用" />
                        <p>企业商用</p>
                    </a>
                    <a href="https://www.vmall.com/portal/category/?categoryParams=%7B%22targetRoute%22%3A%22CategoryList%22%2C%22routeParams%22%3A%7B%22tagid%22%3A%5B%22TAG663%22%2C%22TAG1179%22%2C%22TAG1227%22%2C%22TAG2654%22%2C%22TAG5133%22%2C%22TAG2657%22%5D%2C%22name%22%3A%5B%22%E9%85%8D%E4%BB%B6%22%5D%7D%7D">
                        <img src="/file/配件.webp" alt="配件" />
                        <p>配件</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=wholehomepc">
                        <img src="/file/全屋智能.webp" alt="全屋智能" />
                        <p>全屋智能</p>
                    </a>
                    <a href="https://www.vmall.com/recycle/landing">
                        <img src="/file/以旧换新.webp" alt="以旧换新" />
                        <p>以旧换新</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=ZCPC">
                        <img src="/file/众测.webp" alt="众测" />
                        <p>众测</p>
                    </a>
                    <a href="https://www.vmall.com/portal/activity/index.html?pn=educationcenterpc">
                        <img src="/file/教育购.webp" alt="教育购" />
                        <p>教育购</p>
                    </a>
                </div>
                <div id="bigphonebox">
                    <h1 id="titlephone">手机专区</h1>
                    <a id="more" href="https://www.vmall.com/portal/activity/index.html?pn=phonespc" alt="更多手机">更多</a>
                    <div id="phonebox1">
                        <div id="phone1" >
                            <Link to="/phone1">
                                <a>
                                    <img src={phone[0].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[0].name}</p>
                                    <p id="phonetexttwo">{phone[0].description}</p>
                                    <p id="phonetextone">¥{phone[0].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone2">
                            <Link to="/phone2">
                                <a>
                                    <img src={phone[1].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[1].name}</p>
                                    <p id="phonetexttwo">{phone[1].description}</p>
                                    <p id="phonetextone">¥{phone[1].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone3">
                            <Link to="/phone3">
                                <a>
                                    <img src={phone[2].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[2].name}</p>
                                    <p id="phonetexttwo">{phone[2].description}</p>
                                    <p id="phonetextone">¥{phone[2].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone4">
                            <Link to="/phone4">
                                <a>
                                    <img src={phone[3].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[3].name}</p>
                                    <p id="phonetexttwo">{phone[3].description}</p>
                                    <p id="phonetextone">¥{phone[3].price}</p>
                                </a>
                            </Link>
                        </div>
                    </div>
                    <div id="phonebox2">
                        <div id="phone5">
                            <Link to="/phone5">
                                <a>
                                    <img src={phone[4].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[4].name}</p>
                                    <p id="phonetexttwo">{phone[4].description}</p>
                                    <p id="phonetextone">¥{phone[4].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone6">
                            <Link to="/phone6">
                                <a>
                                    <img src={phone[5].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[5].name}</p>
                                    <p id="phonetexttwo">{phone[5].description}</p>
                                    <p id="phonetextone">¥{phone[5].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone7">
                            <Link to="/phone7">
                                <a>
                                    <img src={phone[6].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[6].name}</p>
                                    <p id="phonetexttwo">{phone[6].description}</p>
                                    <p id="phonetextone">¥{phone[6].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone8">
                            <Link to="/phone8">
                                <a>
                                    <img src={phone[7].imgpath} alt="手机" />
                                    <p id="phonetextone">{phone[7].name}</p>
                                    <p id="phonetexttwo">{phone[7].description}</p>
                                    <p id="phonetextone">¥{phone[7].price}</p>
                                </a>
                            </Link>
                        </div>
                    </div>
                </div>
                <div id="bigphonebox">
                    <h1 id="titlephone">电脑专区</h1>
                    <a id="more" href="https://www.vmall.com/portal/activity/index.html?pn=pczqpc" alt="更多电脑">更多</a>
                    <div id="phonebox1">
                        <div id="phone1">
                            <Link to="/computer1">
                                <a>
                                    <img src={computer[0].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[0].name}</p>
                                    <p id="phonetexttwo">{computer[0].description}</p>
                                    <p id="phonetextone">¥{computer[0].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone2">
                            <Link to="/computer2">
                                <a>
                                    <img src={computer[1].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[1].name}</p>
                                    <p id="phonetexttwo">{computer[1].description}</p>
                                    <p id="phonetextone">¥{computer[1].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone3">
                            <Link to="/computer3">
                                <a>
                                    <img src={computer[2].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[2].name}</p>
                                    <p id="phonetexttwo">{computer[2].description}</p>
                                    <p id="phonetextone">¥{computer[2].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone4">
                            <Link to="/computer4">
                                <a>
                                    <img src={computer[3].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[3].name}</p>
                                    <p id="phonetexttwo">{computer[3].description}</p>
                                    <p id="phonetextone">¥{computer[3].price}</p>
                                </a>
                            </Link>
                        </div>
                    </div>
                    <div id="phonebox2">
                        <div id="phone5">
                            <Link to="/computer5">
                                <a>
                                    <img src={computer[4].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[4].name}</p>
                                    <p id="phonetexttwo">{computer[4].description}</p>
                                    <p id="phonetextone">¥{computer[4].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone6">
                            <Link to="/computer6">
                                <a>
                                    <img src={computer[5].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[5].name}</p>
                                    <p id="phonetexttwo">{computer[5].description}</p>
                                    <p id="phonetextone">¥{computer[5].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone7">
                            <Link to="/computer7">
                                <a>
                                    <img src={computer[6].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[6].name}</p>
                                    <p id="phonetexttwo">{computer[6].description}</p>
                                    <p id="phonetextone">¥{computer[6].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone8">
                            <Link to="/computer8">
                                <a>
                                    <img src={computer[7].imgpath} alt="电脑" />
                                    <p id="phonetextone">{computer[7].name}</p>
                                    <p id="phonetexttwo">{computer[7].description}</p>
                                    <p id="phonetextone">¥{computer[7].price}</p>
                                </a>
                            </Link>
                        </div>
                    </div>
                </div>
                <div id="bigphonebox">
                    <h1 id="titlephone">平板专区</h1>
                    <a id="more" href="https://www.vmall.com/portal/activity/index.html?pn=huaweipadpc" alt="更多平板">更多</a>
                    <div id="phonebox1">
                        <div id="phone1">
                            <Link to="/tablet1">
                                <a>
                                    <img src={tablet[0].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[0].name}</p>
                                    <p id="phonetexttwo">{tablet[0].description}</p>
                                    <p id="phonetextone">¥{tablet[0].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone2">
                            <Link to="/tablet2">
                                <a>
                                    <img src={tablet[1].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[1].name}</p>
                                    <p id="phonetexttwo">{tablet[1].description}</p>
                                    <p id="phonetextone">¥{tablet[1].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone3">
                            <Link to="/tablet3">
                                <a>
                                    <img src={tablet[2].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[2].name}</p>
                                    <p id="phonetexttwo">{tablet[2].description}</p>
                                    <p id="phonetextone">¥{tablet[2].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone4">
                            <Link to="/tablet4">
                                <a>
                                    <img src={tablet[3].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[3].name}</p>
                                    <p id="phonetexttwo">{tablet[3].description}</p>
                                    <p id="phonetextone">¥{tablet[3].price}</p>
                                </a>
                            </Link>
                        </div>
                    </div>
                    <div id="phonebox2">
                        <div id="phone5">
                            <Link to="/tablet5">
                                <a>
                                    <img src={tablet[4].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[4].name}</p>
                                    <p id="phonetexttwo">{tablet[4].description}</p>
                                    <p id="phonetextone">¥{tablet[4].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone6">
                            <Link to="/tablet6">
                                <a>
                                    <img src={tablet[5].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[5].name}</p>
                                    <p id="phonetexttwo">{tablet[5].description}</p>
                                    <p id="phonetextone">¥{tablet[5].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone7">
                            <Link to="/tablet7">
                                <a>
                                    <img src={tablet[6].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[6].name}</p>
                                    <p id="phonetexttwo">{tablet[6].description}</p>
                                    <p id="phonetextone">¥{tablet[6].price}</p>
                                </a>
                            </Link>
                        </div>
                        <div id="phone8">
                            <Link to="/tablet8">
                                <a>
                                    <img src={tablet[7].imgpath} alt="平板" />
                                    <p id="phonetextone">{tablet[7].name}</p>
                                    <p id="phonetexttwo">{tablet[7].description}</p>
                                    <p id="phonetextone">¥{tablet[7].price}</p>
                                </a>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </Content>
        <Footer className="layout-footer">
            <div className="footer-links">
                <img src="/file/huaweilogo.jpg" alt="华为logo" id="footerlogo" />
                <a href="https://www.huawei.com/cn/">华为集团</a> |
                <a href="https://consumer.huawei.com/cn/">消费者业务网站</a> |
                <a href="https://appgallery.huawei.com/Featured">华为应用市场</a>|
                <a href="https://cloud.huawei.com/">华为终端空间</a>|
                <a href="https://developer.huawei.com/cn/">开发者联盟</a>|
                <a href="https://www.vmall.com/portal/activity/index.html?pageId=401001427">华为商城手机版</a>|
            </div>
            <div className="footer-text">
                本网站上的内容属于华为技术有限公司所有。
            </div>
        </Footer>
    </Layout></>
    return layout
}
export default App